<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">第一步  确定入库仓库</p>
					</div>
					<el-form ref="form" class="firstStep">
                        <el-form-item label="入库仓库：">
                            <el-select v-model="Model.Billtype" placeholder="请选择">
                                <el-option
                                    v-for="item in Model.BilltypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="过账时间：">
                            <el-date-picker
                                size="small"
                                v-model="Model.PostingTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                style="width:200px"
                                >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input class="input-cont" v-model="Model.splitReason" placeholder="请输入内容"></el-input>
                        </el-form-item>
					</el-form>
				</el-row>
				<!--出库操作时 -->
				<div> 
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">第二步  添加入库商品</p>
						</div>
						<div class="OutofstockSearch">
							<el-row class="rows basic">
								<el-col :sm="12" :md="8" :lg="6">
									<el-input class="input-cont" v-model="Model.writeSku" placeholder="请扫码入库/输入SKU" @keyup.enter.native="checkSku"></el-input>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<div class="items">
										<div class="btn">确认</div>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="detailTableDetail">
							<el-table :data="Model.tableDataOut" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
                                <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column 
									v-for="(item,index) in Model.tableHeaderData"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
                                <el-table-column label="数量" width="160">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.outAmount" :min="0" label="描述文字"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单位" width="80">
                                    <template slot-scope="scope">
                                        件
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" :label="$t('common.handleOption')" width="160">
                                    <template slot-scope="scope">
                                        <div class="btnGroup">
                                            <div class="operate-btn">删除</div>
                                        </div>
                                    </template>
                                </el-table-column>
							</el-table>
						</div>
						<el-row class="bottom">
							<div class="btn_group">
                                <div class="btn_item">入库</div>
								<div class="btn_item">保存</div>
								<div class="btn_item cancel" @click="goBack">取消</div>
							</div>
						</el-row>
					</el-row>	
				</div>	
			</div>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
